import {createCmsButton} from "../../../components/CmsButton";

export const useButtonElement = ({ api, components, binding }) => {
  const registryComponentRender = components.render.registryComponentRender
  const registryComponentConfig = components.config.registryComponentConfig
  const BindingEditor = binding.config.BindingEditor
  // 组件注册和配置
  registryComponentConfig({
    group: '可用组件', name: '按钮', component: {
      code: 'button',
      preview: () => (
        <img
          src="http://1.116.13.72/web/upload_file/20211223144240_86081321-63bb-11ec-8add-525400138871/filter_button.png"
          style={{
            width: "100%",
            objectFit: 'contain',
          }}
        />
      ),
      defaultData: {
        style: {
          display: 'inline-block',
        },
        data: {
          text: '按钮文案',
          mode: 'dark',
          size: 'large',
          width: '200px',
          arrow: true,
        }
      },
      config: ({ registry }) => {

        const buttonModeOptions = [
          { label: '亮色按钮', val: 'light' },
          { label: '深色按钮', val: 'dark' },
        ];
        const buttonSizeOptions = [
          { label: '大', val: 'large' },
          { label: '中', val: 'normal' },
          { label: '小', val: 'small' },
        ];

        registry({
          name: '按钮设置',
          render: ({ editData }) => (
            <>
              <PlFormItem label="按钮文本">
                <BindingEditor v-model={editData.data.text} data={editData}>
                  <PlInput v-model={editData.data.text}/>
                </BindingEditor>
              </PlFormItem>
              <PlFormItem label="按钮类型">
                <PlSelect v-model={editData.data.mode}>
                  {buttonModeOptions.map(item => (
                    <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                  ))}
                </PlSelect>
              </PlFormItem>
              <PlFormItem label="按钮大小">
                <PlSelect v-model={editData.data.size}>
                  {buttonSizeOptions.map(item => (
                    <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                  ))}
                </PlSelect>
              </PlFormItem>
              <PlFormItem label="按钮宽度">
                <PlInput v-model={editData.data.width}/>
              </PlFormItem>
              <PlFormItem label="显示箭头">
                <PlToggle v-model={editData.data.arrow}/>
              </PlFormItem>
            </>
          )
        });
      },
    }
  });

  // 组件渲染
  const CmsButton = createCmsButton(api);
  registryComponentRender('button', ({ data }) => (
    <CmsButton mode={data.data.mode} size={data.data.size} width={data.data.width} arrow={data.data.arrow}>
      {getBindingValue(data.data.text, data)}
    </CmsButton>
  ));
}
